<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/master">

<!--头部-->
<body layout:fragment="content">
    <header class="module-layer">
        <div class="module-layer-content">
            <div class="module-layer-bg"></div>
            <div class="search-box-cover"></div>
            <p class="layer-logo"><img src="/images/logo.png"></p>
            <h1 class="layer-head-name">
                <div class="pr search-box">
                    <img class="shop-search" src="/images/icon_search.png"/>
                    <input id="shop-input" type="text" placeholder="零食" value=""/>
                </div>
            </h1>
            <p class="layer-login">
                <a th:if="${userInfo eq null}" href="/login">登录</a>
                <a th:if="${userInfo ne null}" href="/center">我的</a>
            </p>
        </div>
    </header>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            var $body = $('body');
            var setCoverOpacity = function () {
                $body.find('.search-box-cover').css({
                    opacity: ((($body.scrollTop() / 150) > 0.9) ? 0.9 : ($body.scrollTop() / 150))
                })
            }
            //初始化设置背景透明度
            setCoverOpacity();
            //监听滚动条事件，改变透明度
            $(window).scroll(function () {
                setCoverOpacity();
            });
        });
    </script>

    <div class="module-content">
        <!--banner图-->
        <div class="swiper-container banner">
            <ul class="swiper-wrapper">
                <li class="swiper-slide">
                    <img src="images/banner.jpg">
                </li>
                <li class="swiper-slide">
                    <img src="images/banner01.jpg">
                </li>
                <li class="swiper-slide">
                    <img src="images/banner.jpg">
                </li>
                <li class="swiper-slide">
                    <img src="images/banner01.jpg">
                </li>
            </ul>
            <div class="swiper-pagination sp01"></div>
            <script>
                var swiper = new Swiper('.banner', {
                    pagination: '.sp01',
                    paginationClickable: true,
                    autoplay: "3000",
                    loop: "ture",
                    speed: 500,
                    autoplayDisableOnInteraction: false,
                });
            </script>
        </div>

        <!-- 图标导航icon -->
        <div class="swiper-container nav_iconbox">
            <!-- 每个ul有8个li，不能多于8个 -->
            <div class="swiper-wrapper" th:utext="${allCategory}">

            </div>
            <div class="swiper-pagination icon01"></div>
            <script>
                var swiper = new Swiper('.nav_iconbox', {
                    pagination: '.icon01',
                    paginationClickable: true,
                    speed: 500,
                    autoplayDisableOnInteraction: false,
                });
            </script>
        </div>

<!--        &lt;!&ndash; 商城公告和商家入驻口 &ndash;&gt;-->
<!--        <div class="news_sj_dxs_box bgwh mb6">-->
<!--            <div class="scrollnews">-->
<!--                <span><a href="newslist.html"><img src="images/news_tit.png"></a></span>-->
<!--                <ul>-->
<!--                    <li><a href="news_xq.html">热烈祝贺颜文明体育贵阳市枣山路店盛大开业</a></li>-->
<!--                    <li><a href="news_xq.html">认真学习十九大精神，争取贯彻落实习总书记讲话</a></li>-->
<!--                    <li><a href="news_xq.html">董事长在员工大会上发表演讲！</a></li>-->
<!--                </ul>-->
<!--                <script type="text/javascript">-->
<!--                    $(document).ready(function () {-->
<!--                        //滚动文字-->
<!--                        function runtxt() {-->
<!--                            $(".scrollnews ul").animate({marginTop: "-.4rem"}, 300,-->
<!--                                function () {-->
<!--                                    $(".scrollnews ul li:last").after($(".scrollnews ul li:first"))-->
<!--                                    $(".scrollnews ul").css("margin-top", 0)-->
<!--                                }-->
<!--                            )-->
<!--                        }-->

<!--                        $(".scrollnews ul li a").mouseenter(-->
<!--                            function () {-->
<!--                                clearInterval(timer)-->
<!--                            }-->
<!--                        )-->
<!--                        $(".scrollnews ul li a").mouseleave(-->
<!--                            function () {-->
<!--                                timer = setInterval(runtxt, 4000)-->
<!--                            }-->
<!--                        )-->
<!--                        timer = setInterval(runtxt, 4000)-->
<!--                    })-->
<!--                </script>-->
<!--            </div>-->
<!--            <div class="sj_dxs_box">-->
<!--                <h2>-->
<!--                    <a href="apply_index.html">-->
<!--                        <img src="images/bg_sj.jpg">-->
<!--                    </a>-->
<!--                </h2>-->
<!--            </div>-->
<!--        </div>-->

        <!-- 热销品类 -->
        <div class="yh_select bgwh mb6">
            <div class="index_title rel">
                <h1>
                    <a>热销品类</a>
                </h1>
                <i></i>
            </div>
            <div class="yh_goodsbox fix">
                <div class="l">
                    <div class="swiper-container yh_wrapper">
                        <ul class="swiper-wrapper" >
                            <li th:each="item:${getJinRiXiaoLiangBang}" class="swiper-slide" >
                                <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                                    <img th:src="${item.goodsThumbnailUrl}">
                                    <p th:text="${item.goodsName}"></p>
                                    <span><!-- <em>￥699.00</em> --><i>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</i></span>
                                </a>
                            </li>
                        </ul>
                        <div class="swiper-pagination sp02"></div>
                        <script>
                            var swiper = new Swiper('.yh_wrapper', {
                                pagination: '.sp02',
                                paginationClickable: true,
                                autoplay: "3000",
                                loop: "ture",
                                speed: 500,
                                autoplayDisableOnInteraction: false,
                            });
                        </script>
                    </div>
                </div>

                <div class="two r">
                    <h2>
                        <a href="search_gzttc.html"><img src="images/index_ad_pic(2).jpg"></a>
                    </h2>
                    <h3>
                        <a href="search_gzttc.html"><img src="images/index_ad_pic(3).jpg"></a>
                    </h3>
                    <h4>
                        <a href="search_gzttc.html"><img src="images/index_ad_pic(6).jpg"></a>
                    </h4>
                </div>
            </div>
        </div>

        <!-- 广告条 -->
<!--        <div class="ad_picbox">-->
<!--            <ul class="swiper-wrapper">-->
<!--                <li class="swiper-slide">-->
<!--                    <a href="#"><img src="images/ad_pic01.jpg"></a>-->
<!--                </li>-->
<!--                <li class="swiper-slide">-->
<!--                    <a href="#"><img src="images/ad_pic02.jpg"></a>-->
<!--                </li>-->
<!--                <li class="swiper-slide">-->
<!--                    <a href="#"><img src="images/ad_pic03.jpg"></a>-->
<!--                </li>-->
<!--            </ul>-->
<!--            <script>-->
<!--                var swiper = new Swiper('.ad_picbox', {-->
<!--                    autoplay: "4000",-->
<!--                    effect: "fade",-->
<!--                    loop: "ture",-->
<!--                    speed: 700,-->
<!--                    autoplayDisableOnInteraction: false,-->
<!--                });-->
<!--            </script>-->
<!--        </div>-->

        <!-- 实时热销榜 -->
        <div class="new_goods bgwh mb6">
            <div class="index_title rel">
                <h1>
                    <a>实时热销榜</a>
                </h1>
                <i></i>
            </div>
            <div class="nine_goods_pic">
                <ul>
                    <li th:each="item:${getShiShiReXiaoBang}">
                        <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                            <img th:src="${item.goodsThumbnailUrl}">
                            <p th:text="${item.goodsName}"></p>
                            <span><i>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</i></span>
                        </a>
                    </li>
                </ul>
                <div class="btn_link">
                    <a th:href="${pddUtil.getListUrl(8569)}">更多热销></a>
                </div>
            </div>
            <!-- 设置图片宽高相等，保持布局统一性 -->
            <script type="text/javascript">
                $(function () {
                    var w = $(".nine_goods_pic ul li img").width()
                    $(".nine_goods_pic ul li img").css("height", w)

                })
            </script>
        </div>


        <!-- 猜你喜欢 -->
        <div class="hot_goods good_stores bgwh mb6">
            <div class="index_title rel">
                <h1>
                    <a>猜你喜欢</a>
                </h1>
                <i></i>
            </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="hot_goods pj_goods_box bgwh mb6">
            <div class="hot_goods_pic pj_goods">
                <ul class="swiper-wrapper">
                    <li th:each="item:${getCaiNiXiHuan}" class="swiper-slide">
                        <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                            <img th:src="${item.goodsThumbnailUrl}">
                            <p th:text="${item.goodsName}"></p>
                            <span><i>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</i></span>
                        </a>
                    </li>
                </ul>
                <!-- 设置图片宽高相等，保持布局统一性 -->
                <script type="text/javascript">
                    $(function () {
                        var w = $(".pj_goods ul li img").width()
                        $(".pj_goods ul li img").css("height", w)

                    })
                </script>
            </div>
            <!-- Initialize Swiper -->
            <script>
                var swiper = new Swiper('.pj_goods', {
                    slidesPerView: 3.5,
                    paginationClickable: true,
                    spaceBetween: 10,
                    autoplay: 2500,
                    autoplayDisableOnInteraction: false,
                });
            </script>
        </div>


        <!-- 广告条 -->
        <div class="ad_picbox ad_picbox02">
            <ul class="swiper-wrapper">
                <li class="swiper-slide">
                    <a href="#"><img src="images/ad_pic01.jpg"></a>
                </li>
                <li class="swiper-slide">
                    <a href="#"><img src="images/ad_pic02.jpg"></a>
                </li>
                <li class="swiper-slide">
                    <a href="#"><img src="images/ad_pic03.jpg"></a>
                </li>
            </ul>
            <script>
                var swiper = new Swiper('.ad_picbox02', {
                    autoplay: "4000",
                    effect: "fade",
                    loop: "ture",
                    speed: 700,
                    autoplayDisableOnInteraction: false,
                });
            </script>
        </div>

        <!-- 百货专区 · 食品专区 · 母婴专区 -->
        <div class="sy_goods_box">
            <div class="swiper-container goods_box01 bgwh mb6">
                <!-- 栏目 栏目 -->
                <div class="sy_my_pagetion my_page01"></div>
                <div class="swiper-wrapper">
                    <div class="swiper-slide nine_goods_pic">
                        <ul>
                            <li th:each="item:${getZhuanQuBaiHuo}">
                                <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                                    <img th:src="${item.goodsThumbnailUrl}">
                                    <p th:text="${item.goodsName}"></p>
                                    <span>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</span>
                                </a>
                            </li>

                        </ul>
                        <div class="btn_link">
                            <a th:href="${pddUtil.getListUrl(8590)}">更多百货系列></a>
                        </div>
                    </div>
                    <div class="swiper-slide nine_goods_pic">
                        <ul>
                            <li th:each="item:${getZhuanQuShiPin}">
                                <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                                    <img th:src="${item.goodsThumbnailUrl}">
                                    <p th:text="${item.goodsName}"></p>
                                    <span>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</span>
                                </a>
                            </li>
                        </ul>
                        <div class="btn_link">
                            <a th:href="${pddUtil.getListUrl(8584)}">更多食品系列></a>
                        </div>
                    </div>
                    <div class="swiper-slide nine_goods_pic">
                        <ul>
                            <li th:each="item:${getZhuanQuMuYing}">
                                <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                                    <img th:src="${item.goodsThumbnailUrl}">
                                    <p th:text="${item.goodsName}"></p>
                                    <span>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</span>
                                </a>
                            </li>
                        </ul>
                        <div class="btn_link">
                            <a th:href="${pddUtil.getListUrl(8587)}">更多母婴系列></a>
                        </div>
                    </div>

                </div>

            </div>
            <script>
                var swiper = new Swiper('.goods_box01', {
                    autoHeight: true, //enable auto height
                    pagination: '.my_page01',
                    paginationClickable: true,
                    paginationBulletRender: function (swiper, index, className) {
                        switch (index) {
                            case 0:
                                name = '百货专区';
                                break;
                            case 1:
                                name = '食品专区';
                                break;
                            case 2:
                                name = '母婴专区';
                                break;
                            default:
                                name = '';
                        }
                        return '<a class="' + className + '">' + name + '</a>';
                    }
                });
            </script>
        </div>

        <!-- 女士精品，美妆，电器 -->
        <div class="sy_goods_box">
            <div class="swiper-container goods_box02 bgwh mb6">
                <!-- 栏目 栏目 -->
                <div class="sy_my_pagetion my_page02"></div>
                <div class="swiper-wrapper">
                    <div class="swiper-slide nine_goods_pic">
                        <ul>
                            <li th:each="item:${getZhuanQuNvZhuang}">
                                <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                                    <img th:src="${item.goodsThumbnailUrl}">
                                    <p th:text="${item.goodsName}"></p>
                                    <span>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</span>
                                </a>
                            </li>
                        </ul>
                        <div class="btn_link">
                            <a th:href="${pddUtil.getListUrl(8572)}">更多女士精品></a>
                        </div>
                    </div>
                    <div class="swiper-slide nine_goods_pic">
                        <ul>
                            <li th:each="item:${getZhuanQuMeiZhuang}">
                                <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                                    <img th:src="${item.goodsThumbnailUrl}">
                                    <p th:text="${item.goodsName}"></p>
                                    <span>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</span>
                                </a>
                            </li>
                        </ul>
                        <div class="btn_link">
                            <a th:href="${pddUtil.getListUrl(8593)}">更多美妆系列></a>
                        </div>
                    </div>
                    <div class="swiper-slide nine_goods_pic">
                        <ul>
                            <li th:each="item:${getZhuanQuDianQi}">
                                <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                                    <img th:src="${item.goodsThumbnailUrl}">
                                    <p th:text="${item.goodsName}"></p>
                                    <span>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</span>
                                </a>
                            </li>
                        </ul>
                        <div class="btn_link">
                            <a th:href="${pddUtil.getListUrl(9019)}">更多电器系列></a>
                        </div>
                    </div>

                </div>
            </div>
            <script>
                var swiper = new Swiper('.goods_box02', {
                    autoHeight: true, //enable auto height
                    pagination: '.my_page02',
                    paginationClickable: true,
                    paginationBulletRender: function (swiper, index, className) {
                        switch (index) {
                            case 0:
                                name = '女士精品';
                                break;
                            case 1:
                                name = '美妆专区';
                                break;
                            case 2:
                                name = '电器专区';
                                break;
                            default:
                                name = '';
                        }
                        return '<a class="' + className + '">' + name + '</a>';
                    }
                });
            </script>
        </div>

        <!-- 鞋包，内衣，手机 -->
        <div class="sy_goods_box">
            <div class="swiper-container goods_box03 bgwh mb6">
                <!-- 栏目 栏目 -->
                <div class="sy_my_pagetion my_page03"></div>
                <div class="swiper-wrapper">
                    <div class="swiper-slide nine_goods_pic">
                        <ul>
                            <li th:each="item:${getZhuanQuXieBao}">
                                <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                                    <img th:src="${item.goodsThumbnailUrl}">
                                    <p th:text="${item.goodsName}"></p>
                                    <span>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</span>
                                </a>
                            </li>
                        </ul>
                        <div class="btn_link">
                            <a th:href="${pddUtil.getListUrl(8605)}">更多鞋包系列></a>
                        </div>
                    </div>
                    <div class="swiper-slide nine_goods_pic">
                        <ul>
                            <li th:each="item:${getZhuanQuNeiYi}">
                                <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                                    <img th:src="${item.goodsThumbnailUrl}">
                                    <p th:text="${item.goodsName}"></p>
                                    <span>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</span>
                                </a>
                            </li>
                        </ul>
                        <div class="btn_link">
                            <a th:href="${pddUtil.getListUrl(8599)}">更多内衣系列></a>
                        </div>
                    </div>
                    <div class="swiper-slide nine_goods_pic">
                        <ul>
                            <li th:each="item:${getZhuanQuShuiGuo}">
                                <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                                    <img th:src="${item.goodsThumbnailUrl}">
                                    <p th:text="${item.goodsName}"></p>
                                    <span>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</span>
                                </a>
                            </li>
                        </ul>
                        <div class="btn_link">
                            <a th:href="${pddUtil.getListUrl(13)}">更多水果系列></a>
                        </div>
                    </div>

                </div>
            </div>
            <script>
                var swiper = new Swiper('.goods_box03', {
                    autoHeight: true, //enable auto height
                    pagination: '.my_page03',
                    paginationClickable: true,
                    paginationBulletRender: function (swiper, index, className) {
                        switch (index) {
                            case 0:
                                name = '鞋包专区';
                                break;
                            case 1:
                                name = '内衣专区';
                                break;
                            case 2:
                                name = '水果专区';
                                break;
                            default:
                                name = '';
                        }
                        return '<a class="' + className + '">' + name + '</a>';
                    }
                });
            </script>
        </div>


        <!-- 猜你喜欢 -->
        <div class="maybe_u_like">
            <div class="index_title rel">
                <h1>
                    <a>精选爆品-官方直推爆款</a>
                </h1>
                <i></i>
            </div>
            <ul>
                <li th:each="item:${getJingXuanBaoPin}">
                    <a th:href="${pddUtil.getDetailUrl(item.goodsSign,item.searchId)}">
                        <img th:src="${item.goodsThumbnailUrl}">
                        <p th:text="${item.goodsName}"></p>
                        <span>￥[[${pddUtil.getPrice(item.minGroupPrice)}]]</span>
                    </a>
                </li>
            </ul>

            <!-- 设置图片宽高相等，保持布局统一性 -->
            <script type="text/javascript">
                $(function () {
                    var w = $(".maybe_u_like ul li i").width()
                    $(".maybe_u_like ul li i").css("height", w)

                })
            </script>
            <div class="zy_more">
                <h2>查看更多爆品</h2>
            </div>
        </div>

        <!-- 返回顶部 -->
        <div class="go_top">
            <a class="btn_top"></a>
        </div>

        <!-- 底部 -->
        <div th:replace="layout/layout::footer_box"></div>
        <!-- 底部导航 -->
        <div th:replace="layout/layout::foot_menu"></div>
    </div>

    <!-- 搜索框 -->
    <div class="search_bomb_box">
        <div class="search_top fix">
            <a><img src="images/back_jt.png"></a>
            <div>
                <form>
                    <input type="text" name="" placeholder="零食">
                    <button type="submit"><img src="/images/icon_search.png"></button>
                </form>
            </div>
        </div>
        <div th:replace="layout/layout::hot_search"></div>
    </div>
    <script type="text/javascript">
        $(function () {
            $(".search-box").mousedown(
                function () {
                    $(".search_bomb_box").show()
                    $(".module-layer").hide()
                    $(".module-content").hide()
                }
            )
            $(".search_bomb_box .search_top>a").mousedown(
                function () {
                    $(".search_bomb_box").hide()
                    $(".module-layer").show()
                    $(".module-content").show()
                }
            )
        })
    </script>
</body>
</html>